<template>
  <div class="formTitle-root">
    <div class="form-title-p">{{title}}</div>

    <div class="right-select">
      <!-- <div class="select-ul" v-if="cascader.data.length>0">
        <el-cascader :options="cascader.data" @change="changeCascader"></el-cascader>
      </div> -->
      <div v-if="selectOptions.length>0">
        <el-select class="select" v-for="(item,index) in selectOptions" v-model="item.selectValue" :key="index" placeholder="请选择" @change="change($event,item)">
          <el-option
            v-for="(item2,index) in item.options"
            :key="index"
            :label="item2.label"
            :value="item2.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "formTitle",
  components: {},
  props: {
    title:{
      type: String,
      default: '',
    },
    selectOptions:{
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      value: '',
    };
  },
  methods: {
    change(value,item){
      // console.log(item);
      if(item.changeFn){
        item.changeFn(value)
      }else{
        this.$emit('selectChange',value)
      }
    }
  },
  mounted() {
    // if(this.selectOptions.length>0){
    //   this.value = this.selectOptions[0][0].value
    // }
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/element-variables.scss";

.formTitle-root{
    padding: 10px 0;
    border-bottom: 1px solid #EFEFEF;
    font-size: 16px;
    position: relative;
    .form-title-p{
        padding-left: 10px;
        border-left: 4px solid $--color-primary;
    }
    .right-select{
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      .select{
        width: 120px;
        margin-left: 10px;
      }
    }
}
</style>
